<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-location"></i>
            <span>设备状态</span>
          </div>
          <div class="card-content">
            <div class="status-item">
              <span>连接状态：</span>
              <el-tag type="success">在线</el-tag>
            </div>
            <div class="status-item">
              <span>电池电量：</span>
              <el-progress :percentage="80" color="#67C23A"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-data-line"></i>
            <span>运行数据</span>
          </div>
          <div class="card-content">
            <div class="status-item">
              <span>运行时长：</span>
              <span>2小时30分钟</span>
            </div>
            <div class="status-item">
              <span>行驶距离：</span>
              <span>1.5公里</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-warning"></i>
            <span>告警信息</span>
          </div>
          <div class="card-content">
            <el-tag type="warning" class="alert-tag">电池电量低</el-tag>
            <el-tag type="info" class="alert-tag">环境温度过高</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-setting"></i>
            <span>系统信息</span>
          </div>
          <div class="card-content">
            <div class="status-item">
              <span>系统版本：</span>
              <span>v1.0.0</span>
            </div>
            <div class="status-item">
              <span>最后更新：</span>
              <span>2024-03-20</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-time"></i>
            <span>实时监控</span>
          </div>
          <div class="chart-content">
            <!-- 这里可以添加图表组件 -->
            <div class="chart-placeholder">实时数据图表</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <i class="el-icon-bell"></i>
            <span>最近事件</span>
          </div>
          <div class="event-list">
            <el-timeline>
              <el-timeline-item
                v-for="(event, index) in events"
                :key="index"
                :type="event.type"
                :timestamp="event.time"
              >
                {{ event.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DashboardPage',
  data() {
    return {
      events: [
        {
          content: '系统启动',
          time: '2024-03-20 10:00:00',
          type: 'success'
        },
        {
          content: '开始自动巡航',
          time: '2024-03-20 10:30:00',
          type: 'primary'
        },
        {
          content: '检测到障碍物',
          time: '2024-03-20 11:00:00',
          type: 'warning'
        }
      ]
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.card-header i {
  margin-right: 8px;
  font-size: 20px;
}

.card-content {
  padding: 10px 0;
}

.status-item {
  margin-bottom: 15px;
}

.alert-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.chart-row {
  margin-top: 20px;
}

.chart-content {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: #909399;
}

.event-list {
  padding: 10px;
  height: 300px;
  overflow-y: auto;
}
</style>